<template>
	<view class="content">
<!-- 		<view class="title">
			<view class="icon"></view>
			累计获取奖励红包：2元
		</view> -->
		<scroll-view class="list" scroll-y="true" @scrolltolower="end">
			<view class="item"  v-for="(item,index) in list">
				<view class="type-date">
					<view class="type">
						<view class="icon"></view>
						{{item.noteType==1?'直播打卡':'其它打卡'}}
					</view>
					<view class="date">{{item.createTime}} <text>分享</text></view>
				</view>
				<view class="item-content">
					<view class="content-item-title">{{item.title}}</view>
					<view class="content-item-mag" @click="info(item)">
						去上传笔记
					</view>
				</view>
		</view>
		<no_order title="暂无打卡笔记" v-if="!list[0]"></no_order>
		</scroll-view>
		<!-- 打卡详情 -->		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				FormData:{
					page:0,
					pageSize:10
				},
				count:0
			}
		},
		onShow() {
           this.list=[];
		   this.FormData.page=1;
		   this.count=0
		   this.get_list();	
		},
		methods: {
			get_list()
			{
				var _this=this;
				var data=this.FormData;
				this.$NoteApi.doRequest("get","note/customer/record/list",data,'json').then(res=>{
					var list=_this.list;
					list=list.concat(res.data.data.records);
					_this.list=list;
					_this.count=res.data.data.total;
				})
			},
			end()
			{
				if(this.FormData.page*this.FormData.pageSize<this.count){
					this.FormData.page=this.FormData.page+1;
					this.get_list()
				}
			},
			info(item){
				uni.navigateTo({
					url:"/videoNote/noteupload/noteupload?info="+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	.content{
		box-sizing: border-box;
		padding: 18upx 24upx;
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;
	}
	.title{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #333;
		font-weight: 600;
	}
	.title .icon{
		width: 34upx;
		height: 40upx;
		background-color: red;
		margin-right: 14upx;
	}
	.list{
		width: 100%;
		flex: 1;
		margin-top: 20upx;
		overflow: auto;
	}
	.item{
		background-color: #fff;
		border-radius: 8upx;
		margin-bottom: 22upx;
		box-sizing: border-box;
		padding: 0upx 26upx;
		position: relative;
	}
	.item .type-date{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid #F6F6F6;
		height: 100upx;
		line-height: 100upx;
		box-sizing: border-box;
		font-size: 28upx;
		font-weight: 500;
	}
	.type-date .type{
		font-weight: 600;
	}
	.item-content{
		
	}
	.item-content .content-item-title{
		box-sizing: border-box;
		padding: 20upx 0upx;
		font-size: 32upx;
		color: #333;
		font-weight: 600;
	}
	.content-item-mag{
		font-size: 32upx;
		color: #E68945;
		font-weight: 500;
		margin-top: 24upx;
		border-top: 2upx dashed #EFEFEF;
		line-height: 76upx;
		text-align: center;
	}
	.content-item-mag text{
		color: #FF7E2C;
	}
	.jieshu{
		position: absolute;
		width: 168upx;
		height: 168upx;
		bottom: 0upx;
		right: 0upx;
		background-color: red;
	}
	.zhezhao{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0upx;
		left: 0upx;
		background-color: #000;
		opacity: 0;
		
	}
	.zhezhao-show-true{
		animation: zhezhao-doanhua 1s forwards;
	}
	@keyframes zhezhao-doanhua {
		0%{}
		100%{opacity: 0.7;}
	}
	.zhezhao-show-false{
		animation: zhezhao-doanhua-show .7s forwards;
	}
	@keyframes zhezhao-doanhua-show {
		0%{opacity: 0.7;}
		59%{opacity: 0;}
		100%{z-index: -1;}
	}
	.info{
		width: 400upx;
		background-color: #fff;
		position: fixed;
		top: 100%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 16upx;
		box-sizing: border-box;
		padding: 44upx 60upx;
		overflow: hidden;
	}
	.info-show-true{
		animation: info-doanhua .6s forwards;
	}
	@keyframes info-doanhua {
		0%{}
		100%{top: 50%;width: 654upx;}
	}
	.info-show-false{
		animation: info-doanhua-show .8s forwards;
	}
	@keyframes info-doanhua-show {
		0%{top: 50%;
		width: 654upx;}
		100%{top: -100%;width: 400upx;}
	}
	.info .titles{
		width: 100%;
		font-weight: 600;
		font-size: 32upx;
		text-align: center;
		position: relative;
	}
	 .info-x{
		width: 50upx;
		height: 50upx;
		background-color: red;
		position: absolute;
		top: 50%;
		right: 0upx;
		transform: translate(0%,-50%);
	}
	.name{
		font-size: 28upx;
		font-weight: 600;
		margin-top: 58upx;
	}
	.info-list{
		box-sizing: border-box;
		padding: 20upx 0upx;
		
		max-height: 700upx;
		overflow: auto;
	}
	.info-item{
		border-bottom: 2upx solid #EFEFEF;
		margin-bottom: 40upx;
	}
	.imgs{
		width: 100%;
		display: flex;
	}
	.imgs image{
		width: 124upx;
		height: 124upx;
		background-color: red;
		border-radius: 8upx;
		margin-right: 40upx;
	}
	.date text{
		color: #E68945;
		margin-left: 20upx;
	}
	.item-date{
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #666666;
		margin: 20upx 0;
	}
	.price{
		font-size: 28upx;
		box-sizing: border-box;
		padding-bottom: 20upx;
	}
	.price text{
		font-weight: 600;
	}

</style>
